Hardware Access via JavaScript
Hardware access via web browsers is becoming integral of web technologies. Web technology platforms are used more to develop apps that live outside of the web. Faster browser release cycles has to helped bring hardware access to web browsers.
Portable devices now come with cameras, microphones, gyroscopes, GPS, light sensors and of course, the touch screen. Apps developed for the device have access to the device hardware.
But that hasn’t stopped the people creating web technologies to move forward to have access to the hardware. Now we can access hardware using JavaScript, HTML and CSS(somewhat)!
Below I will go over on some of the API’s that have access to your hardware.
GeoLocation
GeoLocation will read your location and return position coordinates, its longitude and latitude.
1 2 3 4 5 6 7 8 9 10 11 |
|
Detect Device Orientation
The device orientation returns the values collected by the Gyroscope.
1 2 3 4 5 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
To explain:
- alpha – rotation of z-axis – how far the device is rotated around a line perpendicular to the device.
- beta – rotation of x-axis – how far the device has tipped forward to backward
- gamma – rotation of y-axis – how far the device has tipped left or right
Read More:
deviceOrientation
(Mozilla)
Camera or Microphone Access
getUserMedia
prompts the user for access to the media device.
1
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Read More
Battery API
The Battery API provides information about the systems battery. This can be used to measure the battery usage that your app is using. This can be used to manage your apps resources, what to trigger and what not.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Read More:
Vibrate
The method pulses the vibration hardware on the device. You can send a pattern for the vibration you want to trigger. The pattern alternates from the duration of the vibration and the pause.
1 2 |
|
A fun way to implement it, is by synching it to transitions and animations on screen.
Read More:
Ambient Light
Ambient light provides information from the phot sensors about the light levels near the device.
1 2 3 |
|
A creative approach to the Ambient light, is to have a story adjust the mood depending on the amount of light in the room.
Touch Events
Touch Events are easy to overlook as hardware access since touch is the way we input on portable devices. Multi touch and gestures are exclusive input events to touch screens.
I’m not going expand here about touch devices, but you can read more about it: * W3 * Mozilla: Touch Events * hammer.js – JavaScript library with various touch events.
FileReader
A brief mention is being able to read the files on the device. Coremob Camera is an attempt to build a camera using web technologies.